<template>
  <div class="addorganization">
    <p class="form-title">添加党组织</p>
    <div class="form">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
        size="medium"
      >
        <el-form-item label="企业组织名称 :" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="上级企业组织 :" prop="upregions">
          <el-select v-model="ruleForm.auth_id" placeholder>
            <!-- 上级企业组织 -->
            <el-option v-for="(item,index) in organization" :key="index" label="upregion" :value="item">{{item}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组织类型 :" prop="type">
          <el-select v-model="ruleForm.type" placeholder>
            <!-- 组织类型 -->
            <!-- 返回单个数字 -->
            <!-- <el-option v-for="(item,index) in types" :key="index" :value="item.type">{{item.type}}</el-option>  -->
            <el-option v-for="(item,index) in typelist" :key="index" :value="item.type"></el-option> 
          </el-select>
        </el-form-item>
        <el-form-item label="联系人 :" prop="linkman">
          <el-input v-model="ruleForm.linkman"></el-input>
        </el-form-item>
        <el-form-item label="联系电话 :" prop="tel">
          <el-input v-model="ruleForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="通讯地址 :" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <div class="combo-title">
          产品套餐
          <span>（云党委）</span>
        </div>
        <combos :list="combos"></combos>
        <el-form-item>
          <el-button
            type="warning"
            @click="submitForm('ruleForm')"
            size="small"
            style="width:140px;"
          >保存</el-button>
          <el-button type="info" @click="resetForm('ruleForm')" size="small" style="width:140px;">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
import combos from "../../components/combos/combos";
export default {
  data() {
    return {
        combos: [],
        organization: "",
        //获取的所有选择的权限pid（需完善传值）
        pid:"",
        typelist: [
            {
                id: '1',
                type: '党委'
            },
            {
                id: '2',
                type: '党总支'
            },
            {
                id: '3',
                type: '支部'
            },
            {
                id: '4',
                type: '党小组'
            }
        ],
        ruleForm: {
            name: "",
            type: "",
            tel: "",
            linkman: "",
            address: "",
            auth_id: ""
        },
        rules: {
            name: [
              { required: true, message: "请输入企业组织名称", trigger: "blur" },
              { min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur" }
            ],
            auth_id: [
              { required: true, message: "请选择上级企业组织", trigger: "change" }
            ],
            type: [
              { required: true, message: "请选择组织类型", trigger: "change" }
            ],
            linkman: [
              { required: true, message: "请输入联系人", trigger: "blur" },
              { min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur" }
            ],
            tel: [
              { required: true, message: "请输入联系电话", trigger: "blur" },
              { min: 8, max: 11, message: "长度在 8 到 11 个字符", trigger: "blur" }
            ],
            address: [
              { required: true, message: "请输入通讯地址", trigger: "blur" },
              { min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur" }
            ]
        },
        userCombos: []
    };
  },
  components: { combos },
  mounted() {
    this.userComboLists();
  },
  created(){
    this.superiorOrganization();
  },
  methods: {
    //获得当前账户所有相关组织
    superiorOrganization(){
        this.$axios({
            method: 'get',
            url: 'index/organization/organization_chart',
            params: {}
        }).then((res) => {
            if(res.data.code == 200 ) {
                this.organization = res.data.data
            }
        })
    },
    //提交表单信息创建用户
    submitForm(formName) {
        
      this.$refs[formName].validate(valid => {
        if (valid) {
            // console.log(this.ruleForm.name,'submitForm')
          this.$axios
            .post("/index/organization/create", {
              data: {
                pid: this.pid,
                name: this.name,
                type: this.type,
                tel: this.tel,
                address: this.address,
                linkman: this.linkman,
                auth_id: this.auth_id
              }
            })
            .then(res => {
            //   this.addCombos(val);
              if (res.data.code == 200) {
                this.$message("提交成功");
                this.$router.push('/zzgl/Dzzgl')
              } else {
                this.$message.error('提交失败');
              }
            });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取产品套餐权限列表
    userComboLists() {
      this.$axios({
        method: "get",
        url: "/index/auth/index",
        params: {
          type: "1"
        }
      }).then(res => {
        if (res.data.code == 200) {
            // console.log(res.data.data,'套餐权限列表')
            let modeMap={}
            res.data.data.forEach(item=>{
              if(!modeMap.hasOwnProperty(item.pid)){
                modeMap[item.pid]=[item]
              }else{
                modeMap[item.pid].push(item)
              }
            })
            // 顶层
            if(modeMap[0]){
              modeMap[0].forEach(item=>{
                item.children=modeMap[item.id]||[]
              })
              this.combos=modeMap[0].map(item=>{
                let options=item.children.map(child=>child.name)
                return {
                  title:item.name,
                  options
                }
              })
                // {
                //   title: "系统管理",
                //   options: [
                //     "商品添加/编辑",
                //     "商品删除/恢复",
                //     "分类添加/编辑",
                //     "分类转移/删除",
                //     "商品属性管理",
                //     "商品评价管理"
                //   ]
                // }
            }else{
              this.combos=[]
            }
        }
      });
    }
    //获取组织类型
  }
};
</script>

<style lang="scss">
.addorganization {
  width: 100%;

  .el-form-item__content {
    width: 500px !important;
  }
  .form-title {
    text-align: left;
    margin-left: 20px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
  }
  .el-select {
    width: 100%;
  }
  .combo-title {
    float: left;
    margin-left: 20px;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    text-align: left;
    margin-bottom: 25px;
    span {
      font-size: 14px;
      color: #c8c8c8;
      font-weight: normal;
    }
  }
}
</style>
